<template>
    <div class="container">
        <div class="home-header">
            <img :src="HomeTitle" alt="">
        </div>
        <div class="home-content">
            <div class="item" v-for="(item, index) in data">
                <div class="left-img">
                    <img :src="item.enrollZl" alt="">
                    <div class="icon-text">{{ item.courseName }}</div>
                </div>
                <div class="right-content">
                    <div class="name">
                        {{ item.courseName }}
                    </div>
                    <div class="text">
                        {{ item.introduce }}
                    </div>
                    <div class="button-view">
                        <div class="time">
                            {{ `活动时间：${item.enrollTime}` }}
                        </div>
                        <div class="button">
                            <el-button style="margin-right: 20px;" type="primary" round
                                @click="handleGotoDetail(item)">课程简介</el-button>
                            <el-button type="primary" round @click="handleGotoRegister(item)">我要报名</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import HomeTitle from '@/assets/images/home-title.png'
import homeIcon1Name from '@/assets/images/home-icon1-name.png'
import homeIcon2Name from '@/assets/images/home-icon2-name.png'
import { getToken } from "@/utils/auth";
import { queryCourseList } from '@/api/home.js'
import { useRouter } from 'vue-router'
const router = useRouter()
const { proxy } = getCurrentInstance();
const data = ref([])
const getList = async () => {
    try {
        const res = await queryCourseList()
        if (res.code === 200) {
            data.value = res.rows
            console.log(res)
        }
    } catch (error) {
        proxy.$modal.msgError(error);
    }
}
const handleGotoDetail = (item) => {
    const token = getToken()
    if (!token || token === '') {
        router.push({ path: '/classDetail', query: item })
    } else {
        router.push({ path: '/home/classDetail', query: item })
    }

}

const handleGotoRegister = (item) => {
    const token = getToken()
    if (!token || token === '') {
        // router.push({path: '/'})
        const href = router.resolve({ //使用resolve
            //   name:'test',    //这里是跳转页面的name
            path: '/',
        })
        window.open(href.href, '_blank')

    } else {
        router.push({ path: '/registerClass', query: item })
    }

}
getList()
</script>
<style lang="scss" scoped>
.container {
    // width: 100vw; 无用
    height: calc(100vh - 85px);
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.home-header {
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 1920/263;
    background-image: url("@/assets/images/home-header.png");
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
        width: 40%;
        aspect-ratio: 787/68;
    }
}

.home-content {
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: vh(47);

    .item {
        margin-bottom: 30px;
        padding: 20px;
        display: flex;
        align-items: center;
        width: 1023px;
        height: 240px;
        border-radius: 5px;
        box-shadow: 0 0 5px 1px #ccc;

        .left-img {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 290px;
            height: 200px;
            position: relative;
            img{
                width: 100%;
                height: 100%;
            }
            .icon-text{
                position: absolute;
                color: white;
                font-weight: bold;
                text-align: center;
                font-size: 24px;
                margin: 0 vw(10);
            }
        }
        .right-content {
            margin-left: 25px;
            height: 100%;
            flex: 1;
            display: flex;
            flex-direction: column;

            .name {
                height: 42px;
                border-bottom: 1px solid #ccc;
                font-size: 24px;
                font-weight: bold;
                color: #298DFF;
                margin-bottom: 14px;
            }

            .text {
                flex: 1;
                font-size: 14px;
                font-weight: 400;
                color: #888888;
            }

            .button-view {
                margin-top: 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .time {
                    font-size: 14px;
                    font-weight: 400;
                    color: #888888;
                }

                .button {}
            }
        }
    }
}</style>